<template>
	<view class="you-scroll" ref="youScroll" :class="boxClass">
		<scroll-view
			class="you-scroll-inner"
			ref="youScrollInner"
			:scroll-top="scrollToTop"
			scroll-with-animation
			scroll-y
			:style="{ transform: 'translateY(' + translateY + 'px)', transition: isDown ? '0s' : 'transform 0.3s' }"
			refresher-enabled
			refresher-default-style="white"
			refresher-background="#fff0"
			:refresher-triggered="triggered"
			@refresherrefresh="refresherStart"
			@scrolltolower="scrolltolower"
		>
			<view class="you-scroll-content">
				<slot></slot>
				<uni-load-more color="#55c34d" v-if="showLoad" :status="loadStatus" style="height: 50px" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollToTop: 0,
			scrollTop: 0,
			oldTop: 0,
			sPageY: 0,
			mPageY: 0,
			ePageY: 0,
			translateY: 0,
			pullDownStatus: 1, // 1：下拉刷新 2：松开刷新 3：刷新中
			isDown: false,
			triggered: false
		};
	},
	props: {
		pullDownDistance: {
			type: Number,
			default: 50 // 下拉刷新距离
		},
		reachBottomDistance: {
			type: Number,
			default: 30 // 上拉加载距离
		},
		downPullToRefresh: {
			type: String,
			default: '刷新完成'
		},
		downReleaseToRefresh: {
			type: String,
			default: '松开刷新'
		},
		downRefreshing: {
			type: String,
			default: '刷新中…'
		},
		boxClass: {
			type: String,
			default: ''
		},
		showLoad: {
			type: Boolean,
			default: false
		},
		loadStatus: {
			type: String,
			default: 'loading'
		},
		bg: {
			type: String,
			default: '#f9f9f9'
		}
	},
	methods: {
		scrolltolower() {
			console.log(11);
			this.$emit('onLoadMore');
		},
		refresherStart() {
			this.triggered = true;
			this.$emit('onPullDown', this.endPullDown);
		},
		updateData() {
			this.isDown = true;
			this.translateY = 50;
			this.pullDownStatus = 2;
			this.endFn();
		},
		startFn(e) {
			this.isDown = true;
			this.sPageY = e.changedTouches[0].pageY;
			this.pointY = this.translateY;
		},
		moveFn(e) {
			let view = uni.createSelectorQuery().in(this).select('.you-scroll-inner');
			view.fields(
				{
					size: true,
					scrollOffset: true
				},
				(data) => {
					this.scrollTop = data.scrollTop;
					this.mPageY = e.changedTouches[0].pageY;
					// console.log(this.mPageY - this.sPageY)
					if (this.scrollTop <= 0 && this.mPageY - this.sPageY >= 30) {
						// this.$Cache.set('')
						let translateY = (this.mPageY - this.sPageY) / 2 + this.pointY;
						this.translateY = translateY < 0 ? 0 : translateY;

						if (this.pullDownStatus != 3) {
							if (this.translateY < this.pullDownDistance) {
								this.pullDownStatus = 1;
							} else if (this.translateY >= this.pullDownDistance) {
								this.pullDownStatus = 2;
							}
						}
					}
				}
			).exec();
		},
		endFn(e) {
			this.isDown = false;
			setTimeout(() => {
				this.translateY = this.translateY >= this.pullDownDistance ? this.pullDownDistance : 0;
				if (this.pullDownStatus == 2) {
					// 开始刷新
					this.pullDownStatus = 3;
					// console.log(this.endPullDown);
					this.$emit('onPullDown', this.endPullDown);
				}
			}, 100);
		},
		endPullDown(mm) {
			setTimeout(() => {
				this.triggered = false;
				console.log(this.triggered);
			}, mm || 200);
			// if (this.timeout) clearTimeout(this.timeout);
			// this.timeout = setTimeout(() => {
			// 	this.pullDownStatus = 1;
			// 	this.translateY = 0;
			// }, mm || 0);
		},
		prevent(e) {
			if (this.translateY > 0) {
				e.preventDefault();
			}
		},
		scroll(e) {
			this.$emit('onScroll', e);
			this.oldTop = e.detail.scrollTop;

			if (this.timeout) clearTimeout(this.timeout);
			this.timeout = setTimeout(() => {
				this.scrolltolower(e);
			}, 20);
		},
		scrolltolower(e) {
			let view = uni.createSelectorQuery().in(this).select('.you-scroll-inner');
			view.fields(
				{
					size: true,
					scrollOffset: true
				},
				(data) => {
					if (data.scrollTop >= e.detail.scrollHeight - data.height - this.reachBottomDistance) {
						this.$emit('onLoadMore', e);
					}
				}
			).exec();
		},
		isWeixinCient() {
			var ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				return true;
			} else {
				return false;
			}
		},
		goTop(top) {
			this.scrollToTop = this.oldTop;
			this.$nextTick(function () {
				setTimeout(() => {
					this.scrollToTop = top || 0;
				}, 50);
			});
		}
	},
	mounted() {
		// console.log(111);
		// #ifdef H5
		if (this.isWeixinCient()) {
			document.body.addEventListener('touchmove', this.prevent);
		}
		// #endif
	},
	destroyed() {
		// #ifdef H5
		if (this.isWeixinCient()) {
			document.body.removeEventListener('touchmove', this.prevent);
		}
		// #endif
	}
};
</script>

<style scoped>
.you-scroll {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	/* background-color: #eee; */
}

.you-scroll .pullDown {
	width: 100%;
	height: 40px;
	line-height: 50px;
	text-align: center;
	font-size: 14px;
	overflow: hidden;
	transform: translateY(-100%);
	position: absolute;
	top: -40px;
	left: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	/* background-color: #fff; */
	border-radius: 8px;
}
/* .pullDown::after {
	background: linear-gradient(to left, #fff0 0%, #fff 100%);
} */
::v-deep .uni-scroll-view::-webkit-scrollbar {
	display: none;
}

.you-scroll .pullDown .down-icon {
	width: 40px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
}

.you-scroll .pullDown .animate {
	-webkit-animation: scaleIcon 1s infinite linear;
	-moz-animation: scaleIcon 1s infinite linear;
	-ms-animation: scaleIcon 1s infinite linear;
	animation: scaleIcon 1s infinite linear;
}

.you-scroll .pullDown span {
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
}

.you-scroll .you-scroll-inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	/* top: 10px; */
}

.you-scroll-content {
	overflow: hidden;
    padding-bottom: 10px;
}

@-webkit-keyframes scaleIcon {
	0% {
		transform: scaleY(1);
	}

	40% {
		transform: scaleY(0.8);
	}

	80% {
		transform: scaleY(0.9);
	}

	100% {
		transform: scaleY(1);
	}
}

@-moz-keyframes scaleIcon {
	0% {
		transform: scaleY(1);
	}

	40% {
		transform: scaleY(0.8);
	}

	80% {
		transform: scaleY(0.9);
	}

	100% {
		transform: scaleY(1);
	}
}

@-ms-keyframes scaleIcon {
	0% {
		transform: scaleY(1);
	}

	40% {
		transform: scaleY(0.8);
	}

	80% {
		transform: scaleY(0.9);
	}

	100% {
		transform: scaleY(1);
	}
}

@keyframes scaleIcon {
	0% {
		transform: scaleY(1);
	}

	40% {
		transform: scaleY(0.8);
	}

	80% {
		transform: scaleY(0.9);
	}

	100% {
		transform: scaleY(1);
	}
}
</style>
